<template>
  <div class="nav" :class="!sidebar?'nav-w':'nav-w1'">
    <el-menu default-active="2" class="mynav" :router="true"
             background-color="#0d2439" text-color="#fff" active-text-color="#69b3ff" :collapse="sidebar">
      <el-submenu v-for="item in routes" :key="item.path" :index="item.path" v-show="item.meta.type == type || type == '1'">
        <template slot="title">
          <i class="iconfont" :class="item.meta.icon"></i>
          <span>{{ item.meta.title }}</span>
        </template>
        <el-menu-item v-for="i in item.children" :index="item.path + '/' + i.path" :key="item.path + '/' + i.path">{{ i.meta.title }}</el-menu-item>
      </el-submenu>

    </el-menu>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
export default {
  name: "Sidebar",
  data(){
    return{
      routes:[],
    };
  },
  computed:{
    ...mapGetters(["sidebar", "type"]),
  },
  created() {
    console.log(this.$router);
    let routes=[];
    this.$router.options.routes.forEach((item)=>{
      if (item.meta){
        routes.push(item);
      }
    });
    this.routes=routes;
    console.log(routes);
  },
};
</script>

<style scoped lang="scss">
.el-menu{
  border-right: none;
}
.iconfont {
  font-size: 18px;
  padding-right: 5px;
}
.nav-w{
  width: 167px;
}
.nav-w1{
  width: 64px;
}
.nav {
  background: rgb(13, 36, 57);
  color: #fff;
  overflow: hidden;

  .mynav {
    width: 167px;
  }
}
</style>